import React, { useState, useEffect, useRef } from "react";
import { View, Text, Dimensions, Button, Alert, ScrollView, Image } from "react-native";
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
import type {
    VideoComponentType,
} from "react-native-video/src/fabric/VideoNativeComponent";
import RNCVideo, {
  SelectedTrackType,
  ReactVideoSource,
  type VideoRef,
  type AudioTrack,
  type OnAudioTracksData,
  type OnLoadData,
  type OnVideoAspectRatioData,
  type OnSeekData,
  type OnPlaybackStateChangedData,
  type OnVideoTracksData,
  type VideoTrack,
  type SelectedTrack,
} from 'react-native-video';
import VideoFullScreen from "../demo/videoFullScreen";

export default function EventsTextVideo(): JSX.Element {
    const [disableFocus, setDisableFocus] = useState(false)

    return (
        <Tester style={{ flex: 1 }}>
            <ScrollView style={{ flex: 1 }}>
                <TestSuite name="video">

                    {/* 新增测试用例 */}
                    {/* 事件回调接口 */}
                    <TestCase
                        itShould="onIdle"
                        initialState={false}
                        arrange={({ setState }) => <AddOnIdleTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="onSeek"
                        initialState={false}
                        arrange={({ setState }) => <AddOnSeekTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="onPlaybackStateChanged"
                        initialState={false}
                        arrange={({ setState }) => <AddOnPlaybackStateChangedTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />

                    <TestCase
                        itShould="onAudioTrackTestTest"
                        initialState={false}
                        arrange={({ setState }) => <AddOnAudioTrackTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />                    
                    <TestCase
                        itShould="onAspectRatio"
                        initialState={false}
                        arrange={({ setState }) => <AddOnAspectRatioTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="onControlsVisibilityChange"
                        initialState={false}
                        arrange={({ setState }) => <AddOnControlsVisibilityChangeTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    /> 
                    
                    {/* 视频事件回调测试 */}
                    <TestCase
                        itShould="onLoadStart"
                        initialState={false}
                        arrange={({ setState }) => <AddOnLoadStartTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onProgress"
                        initialState={false}
                        arrange={({ setState }) => <AddOnProgressTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onEnd"
                        initialState={false}
                        arrange={({ setState }) => <AddOnEndTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onLoad"
                        initialState={false}
                        arrange={({ setState }) => <AddOnLoadTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onReadyForDisplay"
                        initialState={false}
                        arrange={({ setState }) => <AddOnReadyForDisplayTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onError"
                        initialState={false}
                        arrange={({ setState }) => <AddOnErrorTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <TestCase
                        itShould="onBuffer"
                        initialState={false}
                        arrange={({ setState }) => <AddOnBufferTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    
                    <VideoFullScreen/>
                </TestSuite>
            </ScrollView>
        </Tester>

    );
}
// 新增的测试用例
const AddOnIdleTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const [currentSrc,setCurrentSrc] = useState({ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" })
    const { disableFocus, setDisableFocus } = props
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [show, setShow] = useState(false)
    useEffect(() => {
        videoref.current?.setSource({...currentSrc});
    }, [currentSrc]);
    const addshow = () => {
        setCurrentSrc({ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" })
        setShow(!show)
    }


    const onVideoIdle = () => {
        console.log('onVideoIdle');
        props.setState(true);
    };

    const onVideoEnd = () => {
        setCurrentSrc( {uri: 'https://vjs.zencdn.net/v/oceans.mp4'} )
        console.log('onVideoEnd');

    };

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={currentSrc as ReactVideoSource}
                        repeat={false}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onIdle={onVideoIdle}
                        onEnd={onVideoEnd}

                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}

const AddOnSeekTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [show, setShow] = useState(false)

    const addshow = () => {
        setShow(!show)
    }
    const addSeek = () => {
        videoref?.current?.seek(3);
    }
    const [currentTime, setCurrentTime] = useState(0);
    const [seekTime, setSeekTime] = useState(0);
    
    const onSeek = (data: OnSeekData) => {
        console.log('onSeek');
        setCurrentTime(data.currentTime);
        setSeekTime(data.seekTime);
        props.setState(true);
    };

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <Text>currentTime:{currentTime},seekTime:{seekTime}</Text>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onSeek={onSeek}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"设置seek"} onPress={addSeek} />
            </View>
        </View>
    );
}

const AddOnPlaybackStateChangedTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const addSeek = () => {
        videoref?.current?.seek(3);
    }

    const onPlaybackStateChanged = (data: OnPlaybackStateChangedData) => {
        console.log('onPlaybackStateChanged');
        props.setState(true);
    };
    const [paused, setPaused] = useState(true)
    const addRepeat = () => {
        setPaused(!paused)
    }

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        paused={paused}
                        onPlaybackStateChanged={onPlaybackStateChanged}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"设置seek"} onPress={addSeek} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />

            </View>
        </View>
    );
}


const AddOnAudioTrackTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoRef = useRef<VideoRef>(null);
    const [show, setShow] = useState(false)
    const [duration, setDuration] = useState(0);
    const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([]);
    const [videoTracks, setVideoTracks] = useState<VideoTrack[]>([]);

    const [selectedAudioTrack, setSelectedAudioTrack] = useState<SelectedTrack | undefined>(undefined);

    const addshow = () => {
        setShow(!show)
    }

    
    const onAudioTracks = (data: OnAudioTracksData) => {
        console.log('onAudioTracks:', data);
        const currentTracks = data.audioTracks || [];
        setAudioTracks(currentTracks);
        const defaultSelectedTrack = currentTracks.find(track => track.selected);
        if (!defaultSelectedTrack) return;
        setSelectedAudioTrack({
            type: SelectedTrackType.INDEX,
            value: defaultSelectedTrack.index,
        });
        props.setState(true);
    };
      const onVideoTracks = (data: OnVideoTracksData) => {
        console.log('onVideoTracks', data.videoTracks);
        setVideoTracks(data.videoTracks);
        props.setState(true);
      };
    const onLoad = (data: OnLoadData) => {
        setDuration(data.duration);
        onAudioTracks(data);
        onVideoTracks(data);
    };

    const switchAudioTracks = () => {
    if (audioTracks.length === 0) return;

    const currentIndex = audioTracks.findIndex(track => {
        if (selectedAudioTrack?.type === SelectedTrackType.INDEX) {
            return track.index === selectedAudioTrack.value;
        }
        return false;
        });
        const nextIndex = (currentIndex + 1) % audioTracks.length;
        const nextTrack = audioTracks[nextIndex];
        setSelectedAudioTrack({
            type: SelectedTrackType.INDEX,
            value: nextTrack.index,
        });
    };


    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <Text numberOfLines={1} ellipsizeMode="tail">videoTracks:{JSON.stringify(videoTracks)}</Text>
            <Text numberOfLines={1} ellipsizeMode="tail">audioTracks:{JSON.stringify(audioTracks)},selectAudioTrack:{JSON.stringify(selectedAudioTrack)}</Text>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoRef}
                        source={{uri:require("../../../assets/multi_track.mp4")} as ReactVideoSource}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onLoad={onLoad}
                        onAudioTracks={onAudioTracks}
                        onVideoTracks={onVideoTracks}
                        selectedAudioTrack={selectedAudioTrack}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"切换音频轨道"} onPress={switchAudioTracks} />
            </View>
        </View>
    );
}

const AddOnAspectRatioTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    const OnAspectRatio = (data: OnVideoAspectRatioData) => {
        console.log('onAspectRatio');
        props.setState(true);
    };

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{uri: 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4'}}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onAspectRatio={OnAspectRatio}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}

const AddOnControlsVisibilityChangeTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const [controls, setControls] = useState(false)

    const addControls = () => {
        setControls(!controls)
    }
    const onControlsVisibilityChange = () => {
                console.log('onControlsVisibilityChange');
        props.setState(true);
    }

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>

            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={true}
                        controls={controls}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onControlsVisibilityChange={onControlsVisibilityChange}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={controls ? "隐藏" : "显示"} onPress={addControls} />
            </View>
        </View>
    );
}

// onLoadStart回调测试组件
const AddOnLoadStartTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }
    
    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ? <RNCVideo
                    source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                    repeat={true}
                    disableFocus={disableFocus}
                    resizeMode={"contain"}
                    style={{ flex: 1 }}
                    onLoadStart={() => {
                        console.log("onLoadStart已触发")
                        props.setState(true);
                    }}
                /> : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>
    );
}

// onProgress回调测试组件
const AddOnProgressTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const { disableFocus, setDisableFocus } = props

    const [currentTime, setCurrentTime] = useState(0);
    const [playableDuration, setPlayableDuration] = useState(0);
    const [seekableDuration, setSeekableDuration] = useState(0);
    
    const onProgress = (data: any) => {
        setCurrentTime(data.currentTime);
        setPlayableDuration(data.playableDuration);
        setSeekableDuration(data.seekableDuration);
        props.setState(true);
    };
    
    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <Text>currentTime:{currentTime} playableDuration: {playableDuration} seekableDuration: {seekableDuration}</Text>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={true}
                        resizeMode={"contain"}
                        disableFocus={disableFocus}
                        style={{ flex: 1 }}
                        onProgress={onProgress}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}

// onEnd回调测试组件
const AddOnEndTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const addRepeat = () => {
        setPaused(!paused)
    }
    
    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={paused}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onEnd={() => {
                            console.log("onEnd已触发")
                            props.setState(true);
                        }}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />
            </View>
        </View>
    );
}

// onLoad回调测试组件
const AddOnLoadTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(false)
    const [show, setShow] = useState(false)

    const addRepeat = () => {
        setShow(!show)
    }
    
    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={paused}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onLoad={(param) => {
                            console.log(22, JSON.stringify(param))
                            props.setState(true);
                        }}
                    /> : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video的onLoad"} onPress={addRepeat} />
            </View>
        </View>
    );
}

// onReadyForDisplay回调测试组件
const AddOnReadyForDisplayTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(false)
    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }

    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={paused}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onReadyForDisplay={() => {
                            props.setState(true);
                        }}
                    /> : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video的onReadyForDisplay"} onPress={addRepeat} />
            </View>
        </View>
    );
}

// onError回调测试组件
const AddOnErrorTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)
    const [error, setError] = useState("")
    const addRepeat = () => {
        setPaused(!paused)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                <Text>断网测试error{error}</Text>
                {
                    show ? <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={false}
                        muted={false}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        onError={(err: any) => {
                            setError(JSON.stringify(err))
                            props.setState(true);
                        }}
                        style={{ flex: 1 }}
                    /> : null
                }
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}

// onBuffer回调测试组件
const AddOnBufferTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(false)
    const [load, setLoad] = useState({ load: false })
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    
    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={paused}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onBuffer={(onBufferData) => {
                            console.log(JSON.stringify(onBufferData))
                            setLoad({ load: onBufferData.isBuffering ?? false });
                            props.setState(true);
                        }}
                    />
                    : null}

                {load.load &&
                    <View
                        style={{ backgroundColor: 'yellow', position: 'absolute', top: 0, width: '100%', height: 220, opacity: 0.7, alignItems: 'center', justifyContent: 'center' }}>
                        <Text>加载中动画</Text>
                    </View>}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}
